import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite' //自动引入ref,reactive等等等
import viteSvgIcons, { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { resolve } from "path"
//  element 自动引入

import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';


import styleImport, {
  ElementPlusResolve,
} from 'vite-plugin-style-import'

export default defineConfig(({ command, mode }: ConfigEnv, isBuild = false): UserConfig => {
  const root = process.cwd()
  const env = loadEnv(mode, root) // 环境变量对象
  // // dev 独有配置
  return {
    root, //项目根目录（index.html 文件所在的位置） 默认： process.cwd()
    base: '/', //  开发或生产环境服务的公共基础路径：默认'/'   1、绝对 URL 路径名： /foo/；  2、完整的 URL： https://foo.com/； 3、空字符串或 ./（用于开发环境）
    publicDir: resolve(__dirname, './dist'), //默认'public'  作为静态资源服务的文件夹  (打包public文件夹会没有，里面得东西会直接编译在dist文件下)
    assetsInclude: resolve(__dirname, 'src/assets'), // 静态资源处理

    // ******插件配置******
    plugins: [
      vue(),
      vueJsx(),
      styleImport({
        resolves: [ElementPlusResolve(),
        ]
      }),
      AutoImport({
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/, /\.vue\?vue/, // .vue
        ],
        eslintrc: {
          enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把enable关掉，即改成false
          //否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
          // filepath: './.eslintrc-auto-import.json', // 生成json文件,可以不配置该项，默认就是将生成在根目录
          globalsPropValue: true,
        },
        imports: [
          'vue',
          'vue-router',
          'pinia',
          '@vueuse/core',
          {
            axios: [
              ['default', 'axios'] // import { default as axios } from 'axios',
            ]
          }
        ],
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({
            prefix: 'Icon',
          }),
        ],
        dts: resolve(resolve(__dirname, './src'), 'types', 'auto-import.d.ts') //生成全局引入的文件
      }),
      //引入SVG图标素材文件
      createSvgIconsPlugin({
        iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
        symbolId: 'icon-[dir]-[name]',
        svgoOptions: isBuild
      }),
      Components({
        // 导入自己的组件
        dirs: ['src/components'],
        extensions: ['vue', 'jsx', 'tsx', 'ts', 'js'],
        // 导入组件库
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({
            enabledCollections: ['ep'],
          })
        ],
        dts: resolve(resolve(__dirname, './src'), 'types', 'components.d.ts')
      }),
      Icons({
        autoInstall: true,
      }),
    ], //配置插件
    // 强制预构建插件包
    optimizeDeps: {
      include: ['axios'],
    },
    // ******开发服务器配置******
    server: {
      // https: true, //(使用https)启用 TLS + HTTP/2。注意：当 server.proxy 选项 也被使用时，将会仅使用 TLS
      // host: true, // 监听所有地址
      hmr: { overlay: false, }, //开始热更新
      port: 4000, //指定开发服务器端口：默认3000
      cors: false, //为开发服务器配置 CORS
      proxy: {
        //配置自定义代理规则
        '/api': {
          target: env.VITE_HTTP,
          changeOrigin: true, //是否跨域
          // 因为node写的接口里有 /api 所以不能去掉
          // rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
    // ******resolver配置******
    resolve: {
      alias: {
        // 别名配置
        // 键必须以斜线开始和结束
        '@': resolve(__dirname, 'src'),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
        components: resolve(__dirname, './src/components'),
        assets: resolve(__dirname, './src/assets'),
        // '#': resolve(__dirname, 'types'),
        build: resolve(__dirname, 'build')
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true
        }
      },
      postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove();
                }
              }
            }
          }
        ]
      },
      modules: {
        localsConvention: 'camelCase'
      }
    },
  }
})